<script setup lang="ts">

import EChart from "~/contentScripts/views/echart.vue";

const props = defineProps({
  dataSource: {
    type: Array,
    default: () => {
      return [];
    }
  },
  disabledIndexes: {
    type: Array,
    default: () => []
  },
  priceRange: {
    type: Array,
    default: () => []
  }
});
let indexes = ref([
  {
    name: '交易金额(元)',
    type: 'bar',
    data: [],
  },
  {
    name: '交易增长幅(%)',
    type: 'bar',
    data: [],
    formatter: '{value}%',
  },
  {
    name: '支付转化率（%）',
    type: 'bar',
    data: [],
    formatter: '{value}%',
  },
  {
    name: '访客数(人)',
    type: 'bar',
    data: [],
  },
  {
    name: '搜索人数(人)',
    type: 'bar',
    data: [],
  },
  {
    name: 'UV价值(元)',
    type: 'bar',
    data: [],
  },
  {
    name: '搜索占比(%)',
    type: 'bar',
    data: [],
    formatter: '{value}%',
  },
  {
    name: '支付买家数(人)',
    type: 'bar',
    data: [],
  },
]);
const calcPriceRangeSeries = () => {
  let series: any[] = [];
  calcIndexesData();
  indexes.value.map((item, index) => {
    let colors = [
      '#1890FF',
      '#2FC25B',
      '#FACC14',
      '#F04864',
      '#8543E0',
      '#13C2C2',
      '#3436C7',
      '#B381E6',
    ];
    series.push({
      name: item.name,
      type: item.type,
      data: item.data.map((d, i) => {
        return {
          value: d,
          itemStyle: {
            color: colors[i % colors.length]
          }
        }
      }),
      xAxisIndex: index,
      yAxisIndex: index,
      axisLabel: {
        formatter: item.formatter || '{value}'
      },
      // barWidth: 10,
    })
  })
  return series;
}
const calcPriceRangeYAxis = () => {
  let yAxis: { type: string; max: unknown; splitLine: { show: boolean; }; }[] = [];
  let priceRanges: any[] = [];
  for (let i = 1; i < props.priceRange.length; i++) {
    if (props.disabledIndexes.includes(i)) continue;
    priceRanges.push(`${props.priceRange[i - 1]}~${props.priceRange[i]}`)
  }
  indexes.value.map((item, index) => {
    yAxis.push({
      gridIndex: index,
      type: 'category',
      data: priceRanges,
      show: index == 0,
      splitLine: {
        show: false
      }
    })
  })
  return yAxis;
}
const options = ref({});
const calcOptions = () => {
  options.value = {
    tooltip: {},
    title: [
      ...indexes.value.map((item, index) => {
        return {
          text: item.name,
          left: index===0?'10%':`${10.25 * index + 10}%`,
          textStyle: {
            textAlign: 'center',
            fontSize: 14,
            // fontWeight: 'normal',
            color: '#222'
          }
        }
      }),
    ],
    grid: [
      ...indexes.value.map((item, index) => {
        return {
          top: 30,
          left: index===0?'10%':`${10.25 * index + 10}%`,
          width: `10.25%`,
          bottom: 10,
          padding: [0, 20, 0, 20],
        }
      }),
    ],
    xAxis:
        [
          ...indexes.value.map((item, index) => {
            return {
              gridIndex: index,
              type: 'value',
              show: false,
              splitLine: {
                show: false
              }
            }
          }),
        ],
    yAxis:
        [
          ...calcPriceRangeYAxis(),
        ],
    series:
        [
          ...calcPriceRangeSeries(),
        ]
  };
}
watch(() => props.dataSource, () => {
  calcOptions();
}, {deep: true});
watch(() => props.priceRange, () => {
  calcOptions();
}, {deep: true})
watch(() => props.disabledIndexes, () => {
  calcOptions();
}, {deep: true})
onMounted(() => {
  calcOptions();
})
const calcIndexesData = () => {
  indexes.value.map((item, index) => {
    let data: any[] = [];
    if (index === 0) {
      for (let i = 1; i < props.priceRange?.length; i++) {
        let amount = 0;
        props.dataSource.map((item) => {
          if (item.customerUnitPrice > props.priceRange[i - 1] && item.customerUnitPrice <= props.priceRange[i]) {
            amount += item.tradeIndex_tran;
          }
        });
        data.push(amount);
      }
    } else if (index === 1) {
      for (let i = 1; i < props.priceRange?.length; i++) {
        let amount = 0;
        props.dataSource.map((item) => {
          if (item.customerUnitPrice > props.priceRange[i - 1] && item.customerUnitPrice <= props.priceRange[i]) {
            amount += item.tradeGrowthRange.value;
          }
        });
        data.push((amount * 100).toFixed(2));
      }
    } else if (index === 2) {
      for (let i = 1; i < props.priceRange?.length; i++) {
        let amount = 0;
        let num = 0;
        props.dataSource.map((item) => {
          if (item.customerUnitPrice > props.priceRange[i - 1] && item.customerUnitPrice <= props.priceRange[i]) {
            amount += parseFloat(item.payRateIndex_tran);
            num++;
          }
        });
        if (num) {
          data.push((amount / num).toFixed(2));
        } else {
          data.push(0);
        }
      }
    } else if (index === 3) {
      for (let i = 1; i < props.priceRange?.length; i++) {
        let amount = 0;
        props.dataSource.map((item) => {
          if (item.customerUnitPrice > props.priceRange[i - 1] && item.customerUnitPrice <= props.priceRange[i]) {
            amount += item.uvIndex_tran;
          }
        });
        data.push(amount);
      }
    } else if (index === 4) {
      for (let i = 1; i < props.priceRange?.length; i++) {
        let amount = 0;
        props.dataSource.map((item) => {
          if (item.customerUnitPrice > props.priceRange[i - 1] && item.customerUnitPrice <= props.priceRange[i]) {
            amount += item.seIpvUvHits_tran;
          }
        });
        data.push(amount);
      }
    } else if (index === 5) {
      for (let i = 1; i < props.priceRange?.length; i++) {
        let amount = 0;
        let num = 0;
        props.dataSource.map((item) => {
          if (item.customerUnitPrice > props.priceRange[i - 1] && item.customerUnitPrice <= props.priceRange[i]) {
            amount += parseFloat(item.uvAmount);
            num++;
          }
        });
        data.push(parseFloat((amount / num).toFixed(2)));
      }
    } else if (index === 6) {
      for (let i = 1; i < props.priceRange?.length; i++) {
        let amount = 0;
        let num = 0;
        props.dataSource.map((item) => {
          if (item.customerUnitPrice > props.priceRange[i - 1] && item.customerUnitPrice <= props.priceRange[i]) {
            amount += parseFloat(item.seRate);
            num++;
          }
        });
        data.push((amount / num).toFixed(2));
      }
    } else if (index === 7) {
      for (let i = 1; i < props.priceRange?.length; i++) {
        let amount = 0;
        props.dataSource.map((item) => {
          if (item.customerUnitPrice > props.priceRange[i - 1] && item.customerUnitPrice <= props.priceRange[i]) {
            amount += item.payUserNumber;
          }
        });
        data.push(amount);
      }
    }
    indexes.value[index].data = data;
  });
}
</script>

<template>
  <EChart style="height: 200px;" :options="options"/>
</template>

<style scoped>

</style>
